<!-- -->
<template>
  <div id='basicmessage'>
    <div class="tradetop">设置我的资料</div>
    <div class="tradesell">
        <div class="message">
            <ul>
                <li>我的用户名：&emsp;&emsp;&emsp;<input type="text" v-model="name" placeholder="请输入会员名" maxlength='8'>&emsp;（8字以内）不可输入符号、下划线</li>
                <li>电子邮箱：&emsp;&emsp;&emsp;&emsp;{{email}}&emsp;（用于认证账号以及修改密码，不可更改）</li>
                <li>联系电话：&emsp;&emsp;&emsp;&emsp;<input type="text" v-model="phone" placeholder="请输入联系电话"></li>
                <li>以太坊钱包地址：&emsp;<input type="text" v-model="address" placeholder="输入以太坊钱包地址"></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="verification">确认修改</button>
            <!-- <button>取消</button> -->
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'basicmessage',
  data () {
    return {
        name: '',      
        email: '',
        phone: '',
        address: ''
    };
  },
  mounted () {
    this.loadmes();
  },
  methods: {
    loadmes () {
      this.axios.post('User/user_info')
      .then(({data})=> {
        console.log(data);
        this.name = data.user.user_name;
        this.email = data.user.user_email;
        this.phone = data.user.user_phone;
        this.address = data.user.user_address;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    verification () {
      let regTel = /^(1[3-9])\d{9}$/;
      let isname = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
        if (!this.name) {
          this.$message({message: '用户名不能为空',type: 'error'});
        } else if (!isname.test(this.name)) {
          this.$message({message: '用户名不规则',type: 'error'});
        }else if (!regTel.test(this.phone)) {
          this.$message({message: '手机号码不合法',type: 'error'});
        }else if (!this.address) {
          this.$message({message: '请输入地址',type: 'error'});
        } else {
          this.axios.post('User/user_info_cl',{
             name: this.name,
             phone: this.phone,
             address: this.address
           })
            .then(({data})=> {
              console.log(data);
              if (data.status === '1') {
                this.name ='', 
                this.phone ='',
                this.address ='',
                this.$message({message: '修改成功',type: 'success'});    
              } else if (data.status === '2') {
                this.$message({message: '修改失败',type: 'error'});                     
              }
          })
            .catch(function (error) {
              console.log(error);
          });
      }			
    },   
    open2() {
     this.$message({
       message: '操作成功',
       type: 'success'
      });
    }
  }
}
</script>
<style lang='scss' scoped>
#basicmessage {
 .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size:13px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(0,0,0,1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153,153,153,1);
 }
 .tradesell {
   .warning {
    width: 550px;
    margin-top: 15px; 
    margin-left: 25px;  
    margin-bottom: 30px;
    padding-left: 5px; 
    font-size:11px;
    font-family:MicrosoftYaHei;
    color:rgba(0,0,0,1);
    background:rgba(255,247,230,1);
    border-radius:2px;
    line-height: 31px;
    border:1px solid rgba(224,3,0,1);
 }
 .message {
     margin-left: 40px;
     margin-top: 10px;
     li {
        line-height: 50px;
        font-size:12px;
        font-family:MicrosoftYaHei;
        color:rgba(102,102,102,1);
        span {
            font-weight: 700;
        }
     }
     input {
        width:209px;
        height:33px;
        padding-left: 5px;
        border-radius:2px;
        border:1px solid rgba(151,151,151,1);
     }
 }
 .btn {
    margin-top: 50px;
    margin-left: 40px;
    button {
    cursor: pointer;
     width:82px;
     height:33px;
     background:rgba(224,3,0,1);
     font-size:12px;
     font-family:MicrosoftYaHei;
     color:rgba(255,255,255,1); 
     border-radius:2px;
    }
    button:nth-of-type(2) {
     margin-left: 25px;
     background:rgba(225,225,225,1);
     color:rgba(0,0,0,1);
    }
    p {
     font-size:11px;
     font-family:MicrosoftYaHei;
     color:rgba(102,102,102,1);
     line-height: 30px;
    }  
  }
 }
}
</style>